<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 1000px;
            margin: 0 auto;
        }

        table {
            width: 100%;
        }

        th {
            padding: 10px;
        }

        td {
            padding: 10px;
            text-align: center;

        }

        tr {
            background-color: #efefef;
        }

        tr:first-child {
            background-color: #999999;
        }

        .count {
            width: 45px;
            text-align: center;
        }

        .btn {
            width: 30px;
        }

        .action-container {
            width: 1000px;
            position: fixed;
            left: 50%;
            right: 0;
            bottom: 0;
            transform: translateX(-50%);
            height: 50px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .action-container>div {
            flex: 1;
            line-height: 50px;
            text-align: center;
        }

        .btn-remove,
        .btn-jiesuan {
            background-color: red;
            color: #fff;
            cursor: pointer;
        }

        .btn-choosed,
        .btn-total-price {
            background-color: #efefef;
        }
    </style>


</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>
                    <input type="checkbox" v-model="isAllChecked">
                    全选
                </th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="pro in productList" :key="pro.id">
                <td><input type="checkbox" v-model="pro.isChecked"></td>
                <td>{{pro.name}}</td>
                <td>{{pro.price.toFixed(2)}}</td>
                <td>
                    <button class="btn" @click="desCount(pro)" :disabled="pro.count == 1">-</button>
                    <input class="count" type="text" v-model.number="pro.count">
                    <button class="btn" @click="pro.count++">+</button>
                </td>
                <td>
                    ￥ {{(pro.price * pro.count).toFixed(2)}}
                </td>
                <td>
                    <button @click="deleteProductById(pro.id)">删除</button>
                </td>
            </tr>
        </table>
        <div class="action-container">
            <div class="btn-remove" @click="deleteProductChecked">删除选中的商品</div>
            <div class="btn-choosed">已选择 {{choosedCount}} 件商品</div>
            <div class="btn-total-price">总价：￥{{totalPrice.toFixed(2)}}</div>
            <div class="btn-jiesuan" @click="goToJieSuan">去结算</div>
        </div>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive, toRefs, computed } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const state = reactive({
                    productList: [
                        { id: '001', name: 'AOC 23英寸IPS显示器', price: 150.99, count: 1 },
                        { id: '002', name: 'Canon / 佳能 EOS 6D 单机', price: 230, count: 2 },
                        { id: '003', name: 'Microsoft / 微软 Surface Pro', price: 400, count: 3 },
                    ]
                })
                // 添加isCheck属性的列表
                // const list = computed(() => {
                //     return state.productList.map(item => {
                //         return {
                //             ...item,
                //             isChecked: false
                //         }
                //     })
                // })
                // console.log("list.value=>", list.value);

                state.productList.forEach(item => {
                    item.isChecked = false
                })
                console.log("state.productList=>", state.productList);

                // 计算选中的个数
                const choosedCount = computed(() => {
                    return state.productList.filter(item => item.isChecked).length
                })

                // 计算总价
                const totalPrice = computed(() => {
                    return state.productList.reduce((total, item) => {
                        if (item.isChecked) { // 选中才计算总价
                            total += item.price * item.count
                            return total

                        } else {
                            return total
                        }
                    }, 0)
                })

                // 减少数量
                const desCount = (item) => {
                    if (item.count > 1) {
                        item.count--
                    } else {
                        item.count = 1
                    }
                }

                // 是否全选
                const isAllChecked = computed({
                    get() {
                        return state.productList.every(item => item.isChecked)
                    },
                    set(val) {
                        state.productList.forEach(item => item.isChecked = val)

                    }
                })
                // 删除商品
                const deleteProductById = (id) => {
                    // 适合少量数据
                    // state.productList = state.productList.filter(item => item.id !== id)


                    // 适合大量数据
                    const index = state.productList.findIndex(item => item.id === id)
                    if (index !== -1) {
                        state.productList.splice(index, 1)
                    }
                }

                // 删除选中的商品
                const deleteProductChecked = () => {
                    state.productList = state.productList.filter(item => !item.isChecked)
                }

                // 去结算
                const goToJieSuan = () => {
                    alert(`是否提交订单，订单总金额为：${totalPrice.value.toFixed(2)}元`)
                }

                return {
                    ...toRefs(state),
                    choosedCount,
                    totalPrice,
                    desCount,
                    isAllChecked,
                    deleteProductById,
                    deleteProductChecked,
                    goToJieSuan
                }
            },

        })


        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>